<template>
    <div class="user-allot">
        <div class="breadBox">
            <el-breadcrumb class="breadcrumb-area" separator-class="el-icon-arrow-right">
                <el-breadcrumb-item :to="{ name: '' }">资源管理</el-breadcrumb-item>
                <el-breadcrumb-item>刀具库列表jiajia</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="center-box">
            <el-form class="q_term" :model="form" ref="form" label-width="100px">
                <el-row>
                    <el-col :span="6">
                        <el-form-item label="刀具库编号:" prop="no">
                            <el-select v-model="form.no" clearable filterable multiple placeholder="请选择">
                                <el-option v-for="(item, index) in EqIdOptionList" :key="index" :label="item.label" :value="item.label">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item label="刀具库名称:" prop="libName">
                            <!-- <el-select v-model="form.name" clearable filterable placeholder="请选择">
                                <el-option v-for="item in MonitorList" :key="item.name" :label="item.name" :value="item.monitoring_item">
                                </el-option>
                            </el-select> -->
                            <el-input v-model="form.libName" placeholder="请输入"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-form-item>
                            <el-select placeholder="请选择活动区域" multiple v-model="citys">
                                <el-option label="选择所有" value="all"></el-option>
                                <el-option v-for="item in cities" :label="item.label" :value="item.value" :key="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button class="BtnYellow fr" @click="searchClick" :loading="loading" type="primary"><i class="fa fa-search"></i> 搜索</el-button>
                    </el-col>
                </el-row>
            </el-form>

            <div class="right-oper ">
                <div class="fr btnwrap">
                    <el-button @click="handleAdd" type="primary"><i class="fa fa-plus"></i> 新增刀具库</el-button>
                    <el-button @click="handelAddTool" type="primary"><i class="fa fa-plus"></i> 新增刀具</el-button>

                </div>
            </div>
        </div>
        <div class="table-area">
            <el-table ref="multipleTable" @selection-change="handleSelectionChange" v-loading="loading" :data="tableData" tooltip-effect="dark" :height="tableHt" border @sort-change="sortTableFun" style="width: 100%">
                <el-table-column type="index" width="50" label="序号"></el-table-column>
                <el-table-column prop="no" width="180" label="刀具库编号" sortable>
                </el-table-column>
                <el-table-column prop="name" width="180" label="刀具库名称" sortable></el-table-column>
                <el-table-column prop="count" min-width="30" align="center" label="数量" sortable>
                </el-table-column>
                <el-table-column prop="standard" min-width="30" align="center" label="规格" sortable>
                </el-table-column>
                <el-table-column prop="changeTime" min-width="30" align="center" label="更新日期">
                    <template slot-scope="scope">
                        <div>
                            {{ scope.row.changeTime | formatDt }}
                        </div>
                    </template>

                </el-table-column>
            </el-table>
        </div>
    </div>
    </div>
</template>
</el-table-column>
<el-table-column prop="valid" min-width="30" align=center label="是否永久有效">
    <template slot-scope="scope">
        <el-tag :type="scope.row.valid === 1 ? 'success' : 'primary'" close-transition>
            {{ scope.row.valid === 1 ? "是" : "否" }}
        </el-tag>
    </template>

</el-table-column>
<el-table-column prop="version" min-width="30" align=center label="版本号"> </el-table-column>
<el-table-column label="操作" width="200" align="center">
    <template slot-scope="scope">
        <el-button type="text" @click="openDetail(scope.row)" class="ft13">查看</el-button>
        <el-button class="operation_btn" type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        <el-button class="operation_btn" type="text" size="small" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
    </template>
</el-table-column>
</el-table>
<div class="pages">
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="tableConfig.currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="tableConfig.pageSize" layout="sizes,total,prev,pager,next" :total="tableConfig.totalNum">
    </el-pagination>
</div>
</div>
</div>
<!-- 新增刀具库 -->
<!-- <addToolMagazine ref="addToolMagazine" @freshData="addShowList"></addToolMagazine> -->
<!-- 新增刀具-->
<!-- <addTools ref="addTools" @refreach="addtoolShow"></addTools> -->
</div>
</template>

<script>
    // import addToolMagazine from "@/views/pages/basicSetting/Dialog/addToolMagazine";
    // import addTools from "@/views/pages/basicSetting/Dialog/addTools";
    // import {
    //     delCutterLibrary,
    //     listCutterItem,
    //     getCutterLibraryNo,
    //     listCutterLibrary
    // } from '@/service/basicSetting/index.js';
    export default {
        name: "exception",
        components: {
            // addToolMagazine,
            // addTools,
        },
        data() {
            return {
                tableData: [],
                tableHt: 300,
                loading: false,
                form: {
                    libName: "",
                    unid: "",
                    no: "",
                    name: "",
                    timeQuantum: "",
                },
                cities: [{
                        value: 'Beijing',
                        label: '北京'
                    },
                    {
                        value: 'Shanghai',
                        label: '上海'
                    },
                    {
                        value: 'Nanjing',
                        label: '南京'
                    },
                    {
                        value: 'Chengdu',
                        label: '成都'
                    },
                    {
                        value: 'Shenzhen',
                        label: '深圳'
                    },
                    {
                        value: 'Guangzhou',
                        label: '广州'
                    }
                ],
                citys: [],
                EqIdOptionList: [],
                owerOptions: [],
                MonitorList: [],
                selection: [],
                tableConfig: {
                    column: "",
                    order: "",
                    pageSize: 10,
                    currentPage: 1,
                    totalNum: 0,
                },
            };
        },
        computed: {
            pageHeight() {
                return this.$store.getters.pageHeight;
            },
        },
        watch: {
            pageHeight(val) {
                this.calcHeight();
            },
            citys: function(val, oldval) {
                let newindex = val.indexOf('all'),
                    oldindex = oldval.indexOf('all'); //获取val和oldval里all的索引,如果没有则返回-1
                if (newindex != -1 && oldindex == -1 && val.length > 1) //如果新的选择里有勾选了选择所有选择所有 则 只直线勾选所有整个选项
                    this.citys = ['all'];
                else if (newindex != -1 && oldindex != -1 && val.length > 1) //如果操作前有勾选了选择所有且当前也选中了勾选所有且勾选数量大于1  则移除掉勾选所有
                    this.citys.splice(val.indexOf('all'), 1)
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.calcHeight();
                this.getToolCoolNum();
                this.getTableData();
            });
        },
        methods: {
            calcHeight() {
                this.tableHt = this.pageHeight - 330;
            },
            selectAll() {},

            searchClick() {
                this.tableConfig.currentPage = 1;
                this.getTableData();
            },
            handleSelectionChange(row) {
                this.selection = [...row];
            },
            addtoolShow() {
                this.getTableData();
            },
            // 新增数据返回
            addShowList() {
                this.getTableData();
            },
            //获取刀具库列表
            getTableData() {
                let params = {
                    no: this.form.no.join(","),
                    name: this.form.libName,
                    curPage: this.tableConfig.currentPage,
                    pageSize: this.tableConfig.pageSize,
                    order: this.tableConfig.order,
                    column: this.tableConfig.column,
                };
                // this.loading = true;
                // listCutterLibrary(params).then(res => {
                //     let data = res.data.data.records;
                //     if (res.data.code == 200) {
                //         this.loading = false;
                //         if (Array.isArray(data)) {
                //             this.tableData = [...data];
                //         }
                //         this.tableConfig.totalNum = res.data.data.total;
                //     } else {
                //         this.loading = false;
                //     }
                // }).catch(err => {
                //     this.loading = false;
                // });
            },
            //表格排序
            sortTableFun(column) {
                this.tableConfig.column = column.prop;
                if (column.prop) {
                    if (column.order == "ascending") {
                        this.tableConfig.order = "ASC";
                    } else if (column.order == "descending") {
                        this.tableConfig.order = "DESC";
                    }
                    this.getTableData();
                }
            },
            //批量删除
            deleteHandle() {
                this.$confirm("确认删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let params = {
                        unid: this.selection.length > 0 ?
                            this.selection.map((v) => v.unid).join() : "",
                    };
                    delMonitorSubscription(params)
                        .then((res) => {
                            if (res.data.code == 200) {
                                this.getTableData();
                                this.$notify({
                                    title: "提示",
                                    type: "success",
                                    message: "操作成功！",
                                });
                            } else {
                                this.onSubmit = false;
                            }
                        })
                        .catch((error) => {});
                });
            },
            //点击删除
            handleDelete(idx, row) {
                this.$confirm("确认删除, 是否继续?", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(() => {
                    let params = {
                        unid: row.unid,
                    };
                    delCutterLibrary(params)
                        .then((res) => {
                            if (res.data.code == 200) {
                                if (this.tableData.length === 1) {
                                    this.tableConfig.currentPage = this.tableConfig.currentPage - 1;
                                    if (this.tableConfig.currentPage === 0) {
                                        this.tableConfig.currentPage = 1;
                                    }
                                }
                                this.getTableData();
                                this.$notify({
                                    title: "提示",
                                    type: "success",
                                    message: "操作成功！",
                                });
                            } else {
                                this.onSubmit = false;
                            }
                        })
                        .catch((error) => {});
                });
            },
            handleSizeChange(val) {
                this.tableConfig.currentPage = 1;
                this.tableConfig.pageSize = val;
                this.getTableData();
            },
            handleCurrentChange(val) {
                this.tableConfig.currentPage = val;
                this.getTableData();
            },

            // 点击添加刀具库
            handleAdd(idx, row) {
                this.$refs.addToolMagazine.showDialog({}, "add");
            },
            // 点击添加刀具
            handelAddTool() {
                this.$refs.addTools.showDialog(null, "add");
            },
            //点击编辑
            handleEdit(row) {
                this.$refs.addToolMagazine.showDialog(row, "update");
            },
            //查看
            openDetail(data) {
                this.$router.push({
                    path: "/toolList",
                    query: {
                        unid: data.unid,
                    },
                });
            },
            // 刀具库编号
            getToolCoolNum() {
                // this.loading = true;
                let param = {};
                // getCutterLibraryNo(param).then((res) => {
                //     if (res.data.code == 200) {
                //         let data = res.data.data;
                //         if (Array.isArray(data)) {
                //             this.EqIdOptionList = data.map(item => {
                //                 return {
                //                     value: item.unid,
                //                     label: item.no,
                //                 };
                //             });
                //         }
                //     } else {}
                // }).catch((error) => {});
            },
        },
    };
</script>